<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>部门列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--模糊搜索区域-->
	<!--<div class="layui-row">-->
		<!--<form class="layui-form layui-col-md12 ok-search">-->
			<!--<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">-->
			<!--<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">-->
			<!--<input class="layui-input" placeholder="请输入角色名" autocomplete="off" name="name">-->
			<!--<button class="layui-btn" lay-submit="" lay-filter="search">-->
				<!--<i class="layui-icon layui-icon-search"></i>-->
			<!--</button>-->
		<!--</form>-->
	<!--</div>-->
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/script/tgfApi.js"></script>
<script src="../../libme/pages/body.js"></script>
<script>
	layui.use(["element", "table", "okMock", "jquery","util", "api"], function () {
		let table = layui.table;
		let okMock = layui.okMock;
		let util = layui.util;
		let $ = layui.jquery;
		let api = layui.api;
		okLoading.close();
		// laydate.render({elem: "#startTime", type: "datetime"});
		// laydate.render({elem: "#endTime", type: "datetime"});

		var DEPT_STATUS_NOT_DELETE = '0',DEPT_STATUS_DELETE='1';

		let dTable = table.render({
			elem: "#tableId",
			url: okMock.api.dept.list,
			limit: 10,
			page: true,
			toolbar: "#toolbarTpl",
			//size: "sm",
            parseData: function (res) {
                return {
                    code: res.code,
                    msg: res.name,
                    //count: res.code == RESP_SUCCESS ? res.extend.page.totalCounts : 0,
                    count: res.extend.page.totalCounts,
                    //data: res.code == RESP_SUCCESS ? res.extend.page.data.list : ''
                    data: res.extend.page.data.list
                };
            },
            beforeSuccessDone: function (res, curr) {
                if(res.code !== api.responseCode.success) {
                    api.defaultErrorhandler(res)
                    return false;
                }
            },
            request: {
                pageName:'currentPage',
                limitName:'pageCounts'
            },
            response: {
                statusCode: "100"
            },
			cols: [[
				{type: "checkbox", width: 50},
				{type: "numbers", title:'序号' , width: 50},
                {field: "deptName", title: "部门名称", width: 130,align: "center"},
                {field: "leader", title: "负责人", width: 100,align: "center"},
                {field: "mobile", title: "手机号码", width: 120,align: "center"},
                {field: "email", title: "邮件号码", width: 140},
				{field: "deptStatus", title: "状态", width: 100,align: "center", templet: "#typeTpl"},

                {field: "createBy", title: "创建人员", width: 120,align: "center", hide: true,
					templet: function (d) {
						if(d.createBy == null || d.createBy == '') {
						    return '-'
                        }
						return d.createBy
                    }
				},
                {field: "createAt", title: "创建时间", width: 120,align: "center", hide: true,
                    templet: function(d){
                        const d_createAt = d.createAt
                        if(d_createAt == null){
                            return '-'
                        }
                        return util.toDateString(d_createAt, 'yyyy-MM-dd')
                    }
                },
                {field: "updateBy", title: "修改人员", width: 120,align: "center", hide: true,
                    templet: function (d) {
                        if(d.updateBy == null || d.updateBy == '') {
                            return '-'
                        }
                        return d.updateBy
                    }
                },
                {field: "updateAt", title: "修改时间", width: 120,align: "center", hide: true,
                    templet: function(d){
                        const d_updateAt = d.updateAt
                        if(d_updateAt == null){
                            return '-'
                        }
                        return util.toDateString(d_updateAt, 'yyyy-MM-dd')
                    }
                },
				{title: "操作", align: "center", templet: "#operationTpl", width: 120}
			]],
			done: function (res, curr, count) {// 服务器返回数据, 当前页码, 总记录数
				//console.log(res, curr, count);
                api.doShowUserPermsMenus();
			}
		});

		// form.on("submit(search)", function (data) {
         //    userTable.reload({
		// 		where: data.field,
		// 		page: {curr: 1}
		// 	});
		// 	console.log("0000")
		// 	return false;
		// });

		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "create":
					add();
					break;
				case "batchDel":
					batchDel();
					break;
			}
		});

		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "modify":
					edit(data);
					break;
				case "delete":
					del(data);
					break;
				case "perms":
				    perms(data);
				    break;
			}
		});

		function add() {
			api.open("添加部门", "dept-add.html", "500px", "90%",
				function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    body.find('input[name=deptStatus]').prop('checked', true);
                },
				function () {
                	dTable.reload();
				}
			)
		}

		function batchDel() {
            api.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                var checkStatusData = table.checkStatus('tableId').data;
                var ids = [];
                if(checkStatusData.length > 0 ) {
                    $.each(checkStatusData, function (idx, obj) {
                        ids.push(obj.deptId);
                    })
                }else{
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                    return;
                }
                //console.log(ids)
                if (ids.length > 0) {
                    deleteByIds(ids)
                }
            });
		}

		function edit(data) {
            api.open("修改部门信息", "dept-add.html", "500px", "90%",
				function (layero, index) {//successFunction

					//回显数据
                    var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
					body.find("input[name='deptId']").val(data.deptId);
					body.find("input[name='deptName']").val(data.deptName);
					body.find("input[name='mobile']").val(data.mobile);
					body.find("input[name='leader']").val(data.leader);

					if(data.deptStatus === DEPT_STATUS_NOT_DELETE){
                        body.find('input[name=deptStatus]').prop('checked', true);
					} else {
                        body.find('input[name=deptStatus]').prop('checked', false);
					}

					body.find("input[name='parentId']").val(data.parentId);
					body.find("input[name='sortno']").val(data.sortno);
					body.find("input[name='remark']").val(data.remark);


            	},
				function () {//endFunction
                    dTable.reload();
					//console.log("end function")
				}
			)
		}

        function del(data) {
            api.confirm("确定要删除吗？", function () {
                var ids = []
                ids.push(data.deptId);
                deleteByIds(ids)
            })
        }

        function deleteByIds(ids) {
            api.request({
                url: okMock.api.dept.deleteByIds,
                where:{ids: ids},
                traditional: true
            },function (resp, stat) {
                api.tableSuccessMsg(resp.name);
            },function () {
                dTable.reload();
            })
        }

	})
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<div class="layui-inline layui-hide dept-create" lay-event="create"><i class="layui-icon layui-icon-add-1"></i></div>
		<div class="layui-inline layui-hide dept-delete" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i></div>
	</div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="typeTpl">
	{{#  if(d.deptStatus == '0'){ }}
	<span class="layui-badge layui-bg-blue">启用</span>
	{{#  } else if(d.deptStatus == '1') { }}
	<span class="layui-badge layui-bg-gray">停用</span>
	{{#  } }}
</script>

<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" class="layui-hide dept-modify" lay-event="modify">修改</i></a> |
	<a href="javascript:" title="删除" class="layui-hide dept-delete" lay-event="delete">删除</a>

</script>
</body>
</html>
